x-tools /
xtools
| Conditions | 1 |
| Paths | 1 |
| Total Lines | 116 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 1 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | $(function () { |
||
| 117 | window.setupMonthYearChart = function (id, datasets, labels, maxTotal) { |
||
| 118 | /** |
||
| 119 | * Namespaces that have been excluded from view via clickable |
||
| 120 | * labels above the chart. |
||
| 121 | * @type {Array} |
||
| 122 | */ |
||
| 123 | var excludedNamespaces = []; |
||
| 124 | |||
| 125 | /** |
||
| 126 | * Number of digits of the max month/year total. We want to keep this consistent |
||
| 127 | * for aesthetic reasons, even if the updated totals are fewer digits in size. |
||
| 128 | * @type {Number} |
||
| 129 | */ |
||
| 130 | var maxDigits = maxTotal.toString().length; |
||
| 131 | |||
| 132 | /** @type {Array} Labels for each namespace. */ |
||
| 133 | var namespaces = datasets.map(function (dataset) { |
||
| 134 | return dataset.label; |
||
| 135 | }); |
||
| 136 | |||
| 137 | /** |
||
| 138 | * Build the labels for the y-axis of the year/monthcount charts, |
||
| 139 | * which include the year/month and the total number of edits across |
||
| 140 | * all namespaces in that year/month. |
||
| 141 | */ |
||
| 142 | function getYAxisLabels() |
||
| 143 | { |
||
| 144 | var labelsAndTotals = {}; |
||
| 145 | datasets.forEach(function (namespace) { |
||
| 146 | if (excludedNamespaces.indexOf(namespace.label) !== -1) { |
||
| 147 | return; |
||
| 148 | } |
||
| 149 | |||
| 150 | namespace.data.forEach(function (count, index) { |
||
| 151 | if (!labelsAndTotals[labels[index]]) { |
||
| 152 | labelsAndTotals[labels[index]] = 0; |
||
| 153 | } |
||
| 154 | labelsAndTotals[labels[index]] += count; |
||
| 155 | }); |
||
| 156 | }); |
||
| 157 | |||
| 158 | // Format labels with totals next to them. This is a bit hacky, |
||
| 159 | // but it works! We use tabs (\t) to make the labels/totals |
||
| 160 | // for each namespace line up perfectly. |
||
| 161 | // The caveat is that we can't localize the numbers because |
||
| 162 | // the commas are not monospaced :( |
||
| 163 | return Object.keys(labelsAndTotals).map(function (year) { |
||
| 164 | var digitCount = labelsAndTotals[year].toString().length; |
||
| 165 | var numTabs = (maxDigits - digitCount) * 2; |
||
| 166 | |||
| 167 | // +5 for a bit of extra spacing. |
||
| 168 | return year + Array(numTabs + 5).join("\t") + |
||
| 169 | labelsAndTotals[year]; |
||
| 170 | }); |
||
| 171 | } |
||
| 172 | |||
| 173 | window[id + 'countsChart'] = new Chart($('#' + id + 'counts-canvas'), { |
||
| 174 | type: 'horizontalBar', |
||
| 175 | data: { |
||
| 176 | labels: getYAxisLabels(), |
||
| 177 | datasets: datasets |
||
| 178 | }, |
||
| 179 | options: { |
||
| 180 | tooltips: { |
||
| 181 | intersect: true, |
||
| 182 | callbacks: { |
||
| 183 | label: function (tooltip) { |
||
| 184 | return tooltip.xLabel.toLocaleString(); |
||
| 185 | }, |
||
| 186 | title: function (tooltip) { |
||
| 187 | var yLabel = tooltip[0].yLabel.replace(/\t.*/, ''); |
||
| 188 | return yLabel + ' - ' + namespaces[tooltip[0].datasetIndex]; |
||
| 189 | } |
||
| 190 | } |
||
| 191 | }, |
||
| 192 | responsive: true, |
||
| 193 | maintainAspectRatio: false, |
||
| 194 | scales: { |
||
| 195 | xAxes: [{ |
||
| 196 | stacked: true, |
||
| 197 | ticks: { |
||
| 198 | beginAtZero: true, |
||
| 199 | callback: function (value) { |
||
| 200 | if (Math.floor(value) === value) { |
||
| 201 | return value.toLocaleString(); |
||
| 202 | } |
||
| 203 | } |
||
| 204 | } |
||
| 205 | }], |
||
| 206 | yAxes: [{ |
||
| 207 | stacked: true |
||
| 208 | }] |
||
| 209 | }, |
||
| 210 | legend: { |
||
| 211 | // Happens when the user enables/disables a namespace via the |
||
| 212 | // labels above the chart. |
||
| 213 | onClick: function (e, legendItem) { |
||
| 214 | // Update totals, skipping over namespaces that have been excluded. |
||
| 215 | if (legendItem.hidden) { |
||
| 216 | excludedNamespaces = excludedNamespaces.filter(function (namespace) { |
||
| 217 | return namespace !== legendItem.text; |
||
| 218 | }); |
||
| 219 | } else { |
||
| 220 | excludedNamespaces.push(legendItem.text); |
||
| 221 | } |
||
| 222 | |||
| 223 | // Update labels with the new totals. |
||
| 224 | window[id + 'countsChart'].config.data.labels = getYAxisLabels(); |
||
| 225 | |||
| 226 | // Yield to default onClick event, which re-renders the chart. |
||
| 227 | Chart.defaults.global.legend.onClick.call(this, e, legendItem); |
||
| 228 | } |
||
| 229 | } |
||
| 230 | } |
||
| 231 | }); |
||
| 232 | } |
||
| 233 |
Loading history...